<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>首页</title>
        <style>
            *{
                text-align: center;
            }
            .center {
                margin: auto;
                width: 50%;
            }
            .aaa {
                float: right;
                margin-right: 468px;
                margin-top: -25px;
            }
            a{
                color: black;
                text-decoration: none;
            }
            a:hover{
                text-decoration: none;
            }
        </style>
        <script th:src="@{/jquery-1.8.3.min.js}"></script>
    </head>
    <body>
        <h1>核酸检测系统</h1>
            <form action="/hospital/index" method="post">
                <select th:name="hospitalId">
                    <option th:value="0">请选择</option>
                    <span th:each="hos : ${list}">
                    <option th:selected="${hos.id eq hid}" th:value="${hos.id}" th:text="${hos.name}"></option>
                </span>
                </select>
                <input type="submit" th:value="查询"/>
            </form>
        <a class="aaa" th:href="@{/hospital/toAdd}">
            <button th:text="新增"></button>
        </a>
        <div class="center">
            <table border="1">
                <tr>
                    <th>被检测人</th>
                    <th>被检测人手机号</th>
                    <th>被检测人身份证号</th>
                    <th>检测机构</th>
                    <th>检测日期</th>
                    <th>检测结果</th>
                    <th>操作</th>
                </tr>
                <tr th:each="list : ${medicalAssay}">
                    <td th:text="${list.assayUser}"></td>
                    <td th:text="${list.phone}"></td>
                    <td th:text="${list.cardNum}"></td>
                    <td th:text="${list.hospital.name}"></td>
                    <td th:text="${list.assayTime}"></td>
                    <td>
                        <span th:if="${list.assayResult eq 0}" th:text="检测中"></span>
                        <span th:if="${list.assayResult eq 1}" th:text="确诊" style="color: red"></span>
                    </td>
                    <td>
                        <a th:href="'javascript:void(0);'" th:if="${list.assayResult eq 0}" th:text="确诊"
                           th:onclick="'javascript:update('+this+','+${list.id}+')'"></a>
                        <a th:href="'javascript:void(0);'" th:if="${list.assayResult eq 1}" th:text="检测中"
                           th:onclick="'javascript:update('+this+','+${list.id}+')'"></a>
                    </td>
                </tr>
            </table>
        </div>
    </body>
    <script>
        $("table tr:nth-child(1)").css("backgroundColor","darkgray");
        $("table tr:nth-child(even)").css("background","aliceblue");
        function update(a,id){
            let status = 0;
            let statusTxt = $(a).html();
            if(statusTxt == "确诊"){
                status = 0;
            }else{
                status = 1;
            }
            if(confirm("确认修改吗?")){
                $.post("/hospital/update",{"assayResult":status,"id":id},function (data){
                    if(data > 0){
                        if(status == 0){
                            $(a).html("检测中").css("color","black");
                            $(a).parent().prev().html("确诊").css("color","red");
                        }else{
                            $(a).html("确诊");
                            $(a).parent().prev().html("检测中").css("color","black");
                        }
                    }
                })
            }else{
                alert("已取消!");
            }
        }
    </script>
</html>